<template>
    <div>
        <div class="Dialog" v-show="data[2]">
            <span class="iconfont cha" @click="show()" >&#xe61a;</span>
            <slot name='title'></slot>
            <div class="zf-box">
                <textarea v-model="contentFrind" rows="3" cols="3" ></textarea>
                <div class="bottom">
                    <Char></Char>
                    <span class="num" :class="{numed:contentFrind.length >140}">{{140-contentFrind.length}}</span>
                </div>
            </div>
            <button class="zf-button">{{data[3]}}</button>
        </div>
    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
        num:140,
        contentFrind:[],
        // isShowZf:this.data[2]
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{

   },
   components:{Char},
   mounted() {
   },
   methods:{
    show(){
        this.$emit("ishowZfF", !this.data[2])

    }
   }
   
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
 
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
    padding: 18px 26px;
    background: white;
    border-radius: 20px;
    height: 342px;
    width: 587px;
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

   .zf-box{
       margin-top: 20px;
     height: 170px;
     width: 590px;
    box-sizing: border-box;
    border: solid #E5E5E5 1px;
        position: relative;
    textarea{
        -webkit-appearance: none ; //是为了去除内阴影样式，但是缺点是不可输入；
        -webkit-user-select: auto; // 解决输入问题；
        outline: none;
        resize: none;
        width: 588px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 27px;
        padding: 6px 12px;
        
        
    }
    textarea {
     letter-spacing: 2px;
      text-align: justify;
    //   text-indent: 48px;
      border: none;
      resize: none;
      outline: none;
      font-family: Avenir,Helvetica,Arial,sans-serif;
    }

    textarea::-webkit-scrollbar {
      width: 4px;    
    }

    textarea::-webkit-scrollbar-thumb {
      border-radius: 10px;
          box-shadow: inset 0 0 5px #e1e1e1;
    background: rgba(0, 0, 0, 0.2);
    }

    textarea::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
    //   background: rgba(0,0,0,0.1);
    }
    .bottom{
        display: flex;
        align-items: center;
        position: absolute;
        width: 100%;
    bottom: 5px;
    div:first-child{
            width: 90%;
    display: inherit;
    }
           .num{
    font-size: 14px;
    margin-left: 10px;
    color:#CFCFE7 ;
    cursor: pointer;
    }
    .numed{
        color: #CD1818;
    }
    }
 
   }
   .zf-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .zf-button{
    float: right;
    outline: none;
    font-size: 15px;
    background: #EC4141;
    border: none;
    padding: 10px 38px;
    color: white;
    border-radius: 17px;
    letter-spacing: 4px;
    margin-top: 38px;
    
   }
}
   
</style>